﻿import React, { Component } from 'react'
import { connect } from 'react-redux'
import { queryNewsDetailAsync } from '../../redux/actions'
import { Button, WingBlank,ActionSheet,Toast  } from 'antd-mobile';
class NewsDetail extends Component {
    constructor(props){
        super(props)
        
    }
    componentDidMount() {
        const id = this.props.match.params.id //文章id
        this.props.queryNewsDetailAsync(id)

    }

    dataList = [
        { url: 'wvEzCMiDZjthhAOcwTOu', title: '新浪微博' },
        { url: 'cTTayShKtEIdQVEMuiWt', title: '生活圈' },
        { url: 'umnHwvEgSyQtXlZjNJTt', title: '微信好友' },
        { url: 'SxpunpETIwdxNjcJamwB', title: 'QQ' },
    ].map(obj => ({
        icon: <img src={`https://gw.alipayobjects.com/zos/rmsportal/${obj.url}.png`} alt={obj.title} style={{ width: 36 }} />,
        title: obj.title,
    }))

    showShareActionSheet = () => {
        ActionSheet.showShareActionSheetWithOptions({
            options: this.dataList,
            // title: 'title',
            message: '请选择一个分享',
        },
        (buttonIndex) => {
            if(buttonIndex > -1){
                Toast.info(this.dataList[buttonIndex].title+"分享成功")
            }
            
        })
    }

    render() {
        const { newsDetail } = this.props
        return (
            <div>
                <div className="aui-flex">
                    <div className="aui-flex-box">
                        <h2>{newsDetail.title}</h2>
                        <h4>{newsDetail.date}</h4>
                    </div>
                </div>
                <div className="aui-flex">
                    <div className="aui-flex-box">
                        <p>{newsDetail.content}</p>
                    </div>
                </div>
                <Button className="share_button" type="primary" onClick={this.showShareActionSheet}>分享</Button>
            </div>
        )
    }
}
export default connect(
    state => ({ newsDetail: state.newsDetail }),
    { queryNewsDetailAsync })(NewsDetail)